<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import CareerRecommender from '../components/CareerRecommender.vue' // 添加组件导入


export default defineComponent({
  components: {
    CareerRecommender // 注册组件
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const activeIndex = ref('1')
    const isRotated = ref(false)
    const showSearch = ref(false) // 新增显示状态
    
    const toggleHelp = () => {
      isRotated.value = !isRotated.value
      showSearch.value = !showSearch.value // 切换搜索框显示状态
    }

    watch(() => route.path, (newPath) => {
      switch(newPath) {
        case '/':
          activeIndex.value = '1'
          break
        case '/career-map':
          activeIndex.value = '2'
          break
        case '/salary':
          activeIndex.value = '3'
          break
        case '/resume':
          activeIndex.value = '4'
          break
        case '/contact':
          activeIndex.value = '5'
          break
      }
    })

    const handleSelect = (key: string) => {
      const pathMap: Record<string, string> = {
        'logo': '/',
        '1': '/',
        '2': '/career-map',
        '3': '/salary',
        '4': '/resume',
        '5': '/contact'
      }
      router.push(pathMap[key])
    }

    return {
      activeIndex,
      handleSelect,
      isRotated,
      toggleHelp,
      showSearch // 暴露状态
    }
  }
})
</script>

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#fff"
    text-color="#333"
    active-text-color="var(--primary-color)"
  >
    <el-menu-item index="logo" class="logo-item">
      <h2 style="color: var(--primary-color)">Employment Navigation</h2>
    </el-menu-item>

    <!-- 帮助按钮移到logo旁边 -->
    <div class="help-container">
      <div class="help-bubble">
        <el-button 
          circle 
          class="bubble-btn"
          @click="toggleHelp"
        >
          <el-icon :class="{ rotated: isRotated }">
            <QuestionFilled />
          </el-icon>
        </el-button>
      </div>
    </div>

    <!-- 导航项，第一个项设置margin-left:auto -->
    <el-menu-item index="1" class="nav-right">
      <router-link to="/">首页</router-link>
    </el-menu-item>
    <el-menu-item index="2">
      <router-link to="/career-map">就业地图</router-link>
    </el-menu-item>
    <el-menu-item index="3">
      <router-link to="/salary">薪资一览</router-link>
    </el-menu-item>
    <el-menu-item index="4">
      <router-link to="/resume">简历生成</router-link>
    </el-menu-item>
    <el-menu-item index="5">
      <router-link to="/contact">联系我们</router-link>
    </el-menu-item>
  </el-menu>

   <!-- 添加AI搜索框 -->
   <CareerRecommender 
      v-if="showSearch"
      class="ai-search-box"
      @close="toggleHelp"
    />

</template>

<style scoped lang="scss">
.el-menu {
  display: flex;
  align-items: center;
  padding: 0 2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.help-container {
  display: flex;
  align-items: center;
  margin-right: 40px; /* 与logo的间距保持一致 */
}

.nav-right {
  margin-left: 500px; /* 推动导航项到右侧 */
}

/* 其他原有样式保持不变 */
.router-link-active {
  color: #6a4daf !important;
  font-weight: 500;
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #6a4daf;
    transition: all 0.3s ease;
  }
}

.el-menu-item a {
  text-decoration: none !important;
}

.nav-link:hover {
  background: rgba(106, 70, 219, 0.05);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(106, 70, 219, 0.1);
}

.logo-item {
  margin-right: 40px;
}

.help-bubble {
  .bubble-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--primary-color);
    border: none;
    box-shadow: 0 2px 8px rgba(106, 70, 219, 0.2);
    transition: all 0.3s ease;

    &:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(106, 70, 219, 0.3);
    }

    .el-icon {
      color: white;
      font-size: 18px;
      transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);

      &.rotated {
        transform: rotate(180deg);
      }
    }
  }
}

/* 新增样式 */
.header-container {
  position: relative;
}

.ai-search-box {
  position: absolute;
  top: 60px; /* 根据导航栏高度调整 */
  right: 1200px; /* 根据帮助按钮位置调整 */
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background: white;
}

/* 调整帮助按钮容器定位 */
.help-container {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 40px;
}

</style>